<template>
  <el-container class="home-container">
    <!--头部-->
    <el-header>
      <el-page-header @back="goBack" content="章节目录"></el-page-header>
    </el-header>
    <el-container>
      <el-aside>
        <div style="margin-top: 100px">
          <el-card :body-style="{padding: '0px'}">
            <el-image style="width: 100%; height: 100%" :src="this.img" :fit="fit"></el-image>
          </el-card>
        </div>
      </el-aside>
      <el-main>
        <el-card>
          <el-row>
            <el-col :span="2">
              <el-form :inline="true" size="small" class="toolbar">
                <el-form-item>
                  <el-popover placement="top" width="160" v-model="visible">
                    <el-input v-model="chapname" placeholder="请输入章节名"></el-input>
                    <div style="text-align: right; margin: 5px">
                      <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                      <el-button type="primary" size="mini" @click="visible = addChap()">确定</el-button>
                    </div>
                    <el-button size="primary" type="success" slot="reference">新建章节</el-button>
                  </el-popover>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item
              v-for="(chap, index) in chapter"
              :key="index"
              :title="chap.chaptername"
            >
              <el-row :gutter="24">
                <el-col :span="20" :offset="2">
                  <el-table :data="smallchap" border style="width: 100%;" size="small">
                    <template slot="empty">还没有数据呢~ (⊙︿⊙)</template>
                    <el-table-column prop="chaptername" label="小节名称" align="center"></el-table-column>
                    <el-table-column align="center" label="小节编辑">
                      
                      <template slot-scope="scope">
                        <el-upload
                            class="upload-demo"
                            action
                            :http-request="multipartUpload"
                            :file-list="fileList2"
                            list-type="picture"
                        >
            <el-button size="small" type="primary">选择视频</el-button>           
          </el-upload>
          
          <el-button size="mini" type="danger" @click="del(scope.row.chapterid)">删除</el-button>
        <el-button size="mini" type="primary" @click="upvideo1(scope.row.chapterid)">提交视频</el-button>
        </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
              <el-divider content-position="left">新建小节</el-divider>
              <el-row :gutter="20">
                <el-col :span="3">
                  <el-popover placement="top" width="160" v-model="visible1">
                    <el-input v-model="smallname" placeholder="请输入小节名"></el-input>
                    <div style="text-align: right; margin: 5px">
                      <el-button size="mini" type="text" @click="visible1 = false">取消</el-button>
                      <el-button type="primary" size="mini" @click="visible1 = addsmallchap()">确定</el-button>
                    </div>
                    <el-button size="mini" type="success" slot="reference">点击新建</el-button>
                  </el-popover>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { client } from "../../../util/alioss";
import { getStore } from "../../../libs/storage";
export default {
  data() {
    return {
        videourl:"",
        fileList2:[],
      chapter: [
        {
          chaptername: "第一章"
        }
      ],
      chapname: "",
      smallname: "",
      activeName: "1",
      smallchap: [
        {
          chaptername: ""
        }
      ],
      visible: false,
      visible1: false,
      img:''
    };
  },
  created() {
    this.listByCategory();
  },
  methods: {

      
    async multipartUpload(file)
   {
        var fileName = "coursevide/" + file.file.uid + "/" + file.file.name;
      //定义唯一的文件名，打印出来的uid其实就是时间戳,/前为文件夹
     
   let result= client().multipartUpload(fileName, file.file);
    //let result= client().put(fileName, file.file);
      console.log(result);
     // console.log(res);
      this.videourl =
        "http://team6.oss-cn-beijing.aliyuncs.com/" + fileName;
      //console.log(this.addCouForm)
      console.log(this.videourl);
    //  this.$axios.post("/updatevideo", {
    //     url:this.videourl,
    //    // chaptername: this.chapname,
    //     chapterid: scope.row.chapterid
    //   });
     // console.log(this.videourl);
   },
    listByCategory() {
      //alert(1);
      console.log(getStore("img"));
      this.img = getStore("img");
      console.log(this.img);
      this.$axios
        .post("/getchapter", {
          courseid: this.$route.params.courseid
        })
        .then(resp => {
          if (resp && resp.status === 200) {
            this.smallchap = resp.data;
            return;
          }
        })
        .catch(failResponse => {
          console.log(getStore("userid"));
          console.log(failResponse.responseResult);
        });
    },
    goBack() {
      this.$router.push("/kcgl");
    },

    addChap() {
      this.chapter.push({
        chaptername: this.chapname
      });
      this.popoverVisible = false;
    },
    govideo() {
      this.$router.push("/video");
    },
    async addsmallchap() {
      let res = await this.$axios.post("/setchap", {
        chaptername: this.smallname,
        courseid: this.$route.params.courseid
      });
      console.log(res);
      this.visible1 = false;
      this.listByCategory();
    },
    async del(id){
      console.log(id);

      let res = await this.$axios.post("delchap",{
        chapterid: id
      });
      if (res && res.status === 200) {
            console.log(id);
            this.$message.success("已通过");
            this.listByCategory();
          }


    },
    async upvideo1(id){
              this.$axios.post("/updatevideo", {
        url:this.videourl,
       // chaptername: this.chapname,
        chapterid: id
      });
     console.log(this.videourl);
     this.$message.info("上传成功！");

      },

  }
};
</script>

<style scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
}
.image {
  width: 100%;
}
</style>